显示，隐藏

  1. 显示$("div").show(1000, function () {});

  2. 隐藏$("div").hide(1000, function () {});

  3. 切换$("div").toggle(1000, function () {});

    示例代码：

展开，收起

  1. 显示$("div").slideDown(1000, function () {});
  2. 隐藏$("div").slideUp(1000, function () {});
  3. 切换$("div").slideToggle(1000, function () {});
    示例代码：
<script>
    $(function () {
        // 编写jQuery相关代码
    $("button").eq(0).click(function () {
        $("div").slideDown(1000, function () {
            alert("展开完毕");
        });
    });
    $("button").eq(1).click(function () {
        $("div").slideUp(1000, function () {
            alert("收起完毕");
        });
    });
    $("button").eq(2).click(function () {
        $("div").slideToggle(1000, function () {
            alert("收起完毕");
        });
    });
    });
</script>

淡入淡出

  1. 淡入$("div").slideDown(1000, function () {});
  2. 淡出$("div").slideUp(1000, function () {});
  3. 切换$("div").slideToggle(1000, function () {});
  4. 淡入到$("div").fadeTo(1000, function () {});
    示例代码：
<script>
    $(function () {
        // 编写jQuery相关代码
        $("button").eq(0).click(function () {
            $("div").fadeIn(1000, function () {
                alert("淡入完毕");
            });
        });
        $("button").eq(1).click(function () {
            $("div").fadeOut(1000, function () {
                alert("淡出完毕");
            });
        });
        $("button").eq(2).click(function () {
            $("div").fadeToggle(1000, function () {
                alert("切换完毕");
            });
        });
        $("button").eq(3).click(function () {
            $("div").fadeTo(1000, 0.2, function () {
                alert("淡入完毕");
            })
        });
    });
</script>

自定义动画

第一个参数: 接收一个对象, 可以在对象中修改属性
第二个参数: 指定动画时长
第三个参数: 指定动画节奏, 默认就是swing
第四个参数: 动画执行完毕之后的回调函数

  1. 操作属性

    $(".two").animate({
    marginLeft: 500
}, 5000, "linear", function () {
    // alert("自定义动画执行完毕");
});

  2. 累加属性

$(".one").animate({
    width: "+=100"
}, 1000, function () {
    alert("自定义动画执行完毕");
});
  1. 关键字
$(".one").animate({
    // width: "hide"隐藏
    // width: "show"显示
    width: "toggle"切换
}, 1000, function () {
    alert("自定义动画执行完毕");
});